<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        height:100%;
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        /*background: paleturquoise;*/
        /*background: white;*/
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 10px 25px 10px 25px;
    }
    /*.layout-copy{*/
        /*height: 50px;*/
        /*text-align: center;*/
        /*padding: 10px 0 20px;*/
        /*color: #9ea7b4;*/
    /*}*/
    .layout-menu-left{
        background: #fff;
        height:100%;
    }
    .layout-menu-right{
        height:100%;
    }
    .layout-header{
        height: 60px;
        line-height: 60px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .layout-logo-left{
        display: block;
        width: 90%;
        height: 30px;
        background: #fff;
        border-radius: 3px;
        margin: 15px auto;
    }
    .layout-ceiling-main a{
        color: #9ba7b5;
    }
    .layout-hide-text .layout-text{
        display: none;
    }
    .ivu-col{
        transition: width .2s ease-in-out;
    }
    .header-company{
        height: 60px
    }
    .header-company .icon-title{
        font-size: 14px;
        color: #6A7989;
        letter-spacing: 0;
        margin-left: 45px;
    }
    .header-company .icon-right{
        margin-left: 4px;
    }
    .icon-status{
        width: 48px;
        height: 16px;
        border: 1px solid #88D65D;
        border-radius: 33px;
        color: #5DB42D;
        background: white;
        margin-bottom: -2px;
        text-align: center;
        padding: 0 3px 0 3px;
        margin-left: 10px;
        line-height: 14px;
    }
    .icon-status span{
        display: inline-block;
        font-size: 10px;
        -webkit-transform: scale(0.75);
    }
    .header-action{
        height: 60px;
    }
    .header-user{
        text-align: center;
    }
    .user-name{
        float: right;
        margin-right: 10px;
    }
    .user-posion{
        float: right;
        margin-right: 10px;
    }
    .avatar{
        float: right;
        margin-top: 10px;
    }

</style>
<template>
    <div class="layout" :class="{'layout-hide-text': spanLeft < 3}">
        <Row type="flex" style="height: 100%;">
            <Col :span="spanLeft" class="layout-menu-left">
                <img class="layout-logo-left" src="../assets/img/logo.png" alt="">
                <Menu active-name="workspace" theme="light" width="auto" @on-select="menuSelect">
                <!--<div class="layout-logo-left">-->

                <!--</div>-->
                <MenuItem name="workspace">
                    <Icon type="android-desktop" :size="iconSize"></Icon>
                    <!--<Icon type="ios-monitor" :size="iconSize"></Icon>-->
                    <span class="layout-text">工作台</span>
                </MenuItem>
                <MenuItem name="2">
                    <Icon type="ios-keypad" :size="iconSize"></Icon>
                    <span class="layout-text">背景调查</span>
                </MenuItem>
                <MenuItem name="3">
                    <Icon type="ios-analytics" :size="iconSize"></Icon>
                    <span class="layout-text">萝卜职说</span>
                </MenuItem>
                <Submenu name="4">
                    <template slot="title">
                        <Icon type="ios-paper" :size="iconSize"></Icon>
                        <span class="layout-text">萝卜职说</span>
                    </template>
                    <MenuItem name="secretList"><span class="layout-text">员工列表</span></MenuItem>
                    <MenuItem name="secretEnter"><span class="layout-text">员工录入</span></MenuItem>
                    <MenuItem name="4-3"><span class="layout-text">员工职说</span></MenuItem>
                </Submenu>
            </Menu>
            </Col>
            <Col :span="spanRight" class="layout-menu-right">
                <Row class="layout-header">
                    <!--<Button type="text" @click="toggleClick">-->
                        <!--<Icon type="navicon" size="32"></Icon>-->
                    <!--</Button>-->
                    <Col span="18" class="header-company">
                        <span class="icon-title">上海科技有限公司</span>
                        <Icon class="icon-right" type="ios-arrow-right" size="14"></Icon>
                        <span class="icon-status"><span>&nbsp;&nbsp;成员&nbsp;&nbsp;</span></span>
                        <span class="icon-status"><span>去认证</span></span>
                    </Col>
                    <Col span="6" class="header-action">
                        <Col span="14" class="header-user">
                            <span>
                                <Avatar icon="person" class="avatar" size="large"/>
                            </span>
                            <!--<span class="user-posion">HR招聘经理</span>-->
                            <span class="user-name">13253521216</span>
                        </Col>
                        <Col span="10">
                            <Row>
                                <Col span="12" style="text-align: center">
                                    <Badge dot>
                                        <Icon type="ios-bell-outline" size="24"></Icon>
                                    </Badge>
                                </Col>
                                <Col span="12">
                                    <Badge>
                                        <Icon type="ios-ionic-outline" size="24"></Icon>
                                    </Badge>
                                </Col>
                            </Row>
                        </Col>
                    </Col>
                </Row>
                <div class="layout-content">
                    <router-view class="layout-content-main"></router-view>
                    <!--<div >内容区域</div>-->
                </div>
                <!--<div class="layout-copy">-->
                    <!--2011-2016 &copy; TalkingData-->
                <!--</div>-->
            </Col>
        </Row>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                spanLeft: 3,
                spanRight: 21
            }
        },
        computed: {
            iconSize () {
                return this.spanLeft === 3 ? 13 : 20;
            }
        },
        methods: {
            toggleClick () {
                if (this.spanLeft === 3) {
                    this.spanLeft = 2;
                    this.spanRight = 22;
                } else {
                    this.spanLeft = 3;
                    this.spanRight = 21;
                }
            },
            menuSelect(name){
//                console.log(name);
                this.$router.push({path: name});
            }
        }
    }
</script>